<template>
  <div>
    <div class="navi">
      <div class="func">
        <img src="./icons/logo1.svg" alt="" width="100px" class="logo">
      </div>
      <div :class="SearchBox" @mouseover="SearchInputChange" @mouseout="SearchInputBack">
        <input v-model="inputSearch" type="text" @focus="SearchBoxChange" @blur="SearchBoxBack" :class="SearchInput" @keyup.enter="Search">
        <button :class="SearchImg" @mouseover="SearchImgChange" @mouseleave="SearchImgBack" @click="Search"><img src="./icons/search.png" alt="" width="20px" height="20px" ></button>
      </div>
      <div class="user">
        <div class="login" v-if="!isLogin" @mouseover="isHover(1)" @mouseleave="leavePrompt">
          <div class="loginText">
            <a href="#">登录</a>
          </div>
        </div>
        <div class="login" v-if="isLogin" @mouseover="isHover(4)" @mouseleave="leavePrompt">
          <div class="loginText">
            <img :src="imgUrl[imgCode]" alt="">
          </div>
        </div>
        <div class="msg" v-if="!isLogin" @mouseover="isHover(2)" @mouseleave="leavePrompt">
          <div class="msgbox">
            <img src="./icons/msg.png" alt="" width="20px" height="20px" class="jump">
            <a href="#">消息</a>
          </div>
        </div>
        <div class="msg" v-if="isLogin" @mouseover="isHover(5)" @mouseleave="leavePrompt">
          <div class="msgbox">
            <img src="./icons/msg.png" alt="" width="20px" height="20px" class="jump">
            <a href="#">消息</a>
          </div>
        </div>
        <div class="history" v-if="!isLogin" @mouseover="isHover(3)" @mouseleave="leavePrompt">
          <div>
            <img src="./icons/history.png" alt="" width="20px" height="20px" class="jump">
            <a href="#">历史</a>
          </div>
        </div>
        <div class="history" v-if="isLogin" @mouseover="isHover(6)" @mouseleave="leavePrompt">
          <div>
            <img src="./icons/history.png" alt="" width="20px" height="20px" class="jump">
            <a href="#">历史</a>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <transition name="fade">
      <div class="msgPrompt" 
           v-show="ShowPrompt === 2" 
           @mouseover="clearHoverTimeout"
           @mouseleave="leavePrompt">
        <div style="text-align: center;height: 50px;margin-top: 10px;color:#a6abb0;">
          登录后即可查看信息
        </div>
        <div class="loginBtn" @click="openLogin">
          <a>登录</a>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="historyPrompt" 
           v-show="ShowPrompt === 3" 
           @mouseover="clearHoverTimeout"
           @mouseleave="leavePrompt">
        <div style="text-align: center;height: 50px;margin-top: 10px;color:#a6abb0;">
          登录后即可查看历史
        </div>
        <div class="loginBtn" @click="openLogin">
          <a>登录</a>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="loginPrompt" 
           v-show="ShowPrompt === 1"        
           @mouseover="clearHoverTimeout"
           @mouseleave="leavePrompt">
        <div>
          登录后你可以：
          <ul class="funcIntroduce">
            <li><img src="./icons/chat.png" alt="" width="10px" height="10px"> 发贴、评论</li>
            <li><img src="./icons/friend.png" alt="" width="13px" height="13px">添加好友</li>
            <li><img src="./icons/watchmsg.png" alt="" width="13px" height="13px">查看消息</li>
            <li><img src="./icons/searchHistory.png" alt="" width="13px" height="13px">查看历史</li>
          </ul>
        </div>
        <div class="loginBtn" @click="openLogin">
          <a>登录</a>
        </div>
        <div class="resignBox">
          还没账号？<a href="#" class="resignBtn" @click="openRegister">点我注册</a>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="loPrompt" v-show="ShowPrompt === 4" @mouseover="clearHoverTimeout" @mouseleave="leavePrompt">
        <div class="loMain">
            <div class="loImage">
                <div class="loImage_img">
                    <img :src="imgUrl[imgCode]" alt="">
                </div>
            </div>
            <div class="loName">
                <div class="textName">{{userName}}</div>
            </div>
            <div class="loList">
                <div>
                    <ul>
                        <li>44</li>
                        <li>关注</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>0</li>
                        <li>粉丝</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>1</li>
                        <li>帖子</li>
                    </ul>
                </div>
            </div>
            <div class="loPerson">
                <div class="personBox" @click="openPerson">
                    <img class="person1" src="./icons/personcenter.png" alt="">
                    <div>
                        <span >个人中心</span>
                    </div>
                    <div><img class="person2" src="./icons/next.png" alt=""></div>
                </div>  
            </div>
            <div class="loOut">
                <div class="personBox">
                    <img class="person1" src="./icons/exit.png" alt="" style="width: 16px;height: 16px;">
                    <div>
                        <span @click="logout">退出登录</span>
                    </div>
                    <div><img class="person2" src="./icons/next.png" alt="" ></div>
                </div>
            </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="loMsgPrompt" v-show="ShowPrompt === 5" @mouseover="clearHoverTimeout" @mouseleave="leavePrompt"> 
        <div class="loMsgMain">
          <div class="mainBoxM">
              <ul>
                  <li>我的发布</li>
                  <li>我的回复</li>
                  <li>系统消息</li>
              </ul>
          </div>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="historyPrompt" 
           v-show="ShowPrompt === 6" 
           @mouseover="clearHoverTimeout"
           @mouseleave="leavePrompt">
        <div style="text-align: center;height: 50px;margin-top: 10px;color:#a6abb0;">
          私密马赛，功能写不完了 (ಥ﹏ಥ) 
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import instance from '@/utils/request'
import * as jose from 'jose';



export default {

  data() {
    return {
      SearchBox: 'search',
      SearchInput: 'SearchInput',
      SearchImg: 'searchImg',
      userName:'',
      inputSearch:'',
      JumpR: 'jump',
      isFocus: false,
      isLogin: false,
      ShowPrompt: 0,
      hoverTimeout: null,
      imgCode:null,
      imgUrl:['/images/1.jpg','/images/1.jpg','/images/2.jpg','/images/3.jpg','/images/4.jpg','/images/5.jpg','/images/6.jpg']
    }
  },
  mounted() {
    instance.get('isLogin').then(res=>{
      if(res.data.code === 1){
        this.isLogin = true
        const tokenDecode = jose.decodeJwt(localStorage.getItem('token'))
        this.userName = tokenDecode.name
        this.imgCode = tokenDecode.imgCode
      }
      else{
        this.isLogin = false
      }
    })
  },
  methods: {
    logout(){
      localStorage.removeItem('token')
      window.location.reload()
    },
    Search(){
      // instance.get('subject',{
      //   params: {
      //     subject:this.inputSearch,
      //     pageSize: 10,
      //     page: 1
      //   }
      // }).then(result=>{
      //   const searchList = result.data.data
      //   this.$store.dispatch('updateSearchList',searchList)
      //   this.$router.push({path: '/search'})
      // })
      this.$store.dispatch('updateSearchList',this.inputSearch)
    },
    SearchBoxChange() {
      this.SearchBox = 'searchfocus'
      this.SearchInput = 'SearchInput'
      this.SearchImg = 'searchImgHover'
      this.isFocus = true
    },
    SearchBoxBack() {
      this.SearchBox = 'search'
      this.SearchImg = 'searchImg'
      this.isFocus = false
    },
    SearchInputChange() {
      if (this.isFocus) {
        return
      }
      this.SearchInput = 'searchInputHover'
      this.SearchImg = 'searchImgHover'
    },
    SearchInputBack() {
      if (this.isFocus) {
        return
      }
      this.SearchInput = 'SearchInput'
      this.SearchImg = 'searchImg'
    },
    SearchImgChange() {
      this.SearchImg = 'searchImg'
    },
    SearchImgBack() {
      this.SearchImg = 'searchImgHover'
    },
    isHover(num) {
      this.clearHoverTimeout(); // 清除之前的定时器
      this.debouncedIsHover(num);
    },
    leavePrompt() {
      this.clearHoverTimeout(); // 清除之前的定时器
      this.debouncedLeavePrompt();
    },
    debouncedIsHover: debounce(function(num) {
      this.hoverTimeout = setTimeout(() => {
        this.ShowPrompt = num;
      }, 400);
    }, 2), // 防抖时间为300毫秒
    debouncedLeavePrompt: debounce(function() {
      this.hoverTimeout = setTimeout(() => {
        this.ShowPrompt = 0;
      }, 100); // 延迟隐藏提示框
    }, 1), // 防抖时间为300毫秒
    clearHoverTimeout() {
      clearTimeout(this.hoverTimeout);
      this.hoverTimeout = null;
    },
    openLogin(){
      if(!this.ifNotLogin){
          this.$store.dispatch('updateNotLogin',true)
          this.$emit('openLogin')
      }
      this.ShowPrompt = 0
    },
    openRegister() {
      if(!this.ifNotLogin){
          this.$store.dispatch('updateNotLogin',true)
          this.$emit('openRegister')
      }
      this.ShowPrompt = 0
    },
    openPerson(){
      this.$emit('openPerson')
      this.ShowPrompt = 0
    }
  },
  computed: {
    ifNotLogin(){
      return this.$store.state.notLogin
    }
  },
}
</script>

<style scoped>
    .logo{
        margin: -10px 100px;
    }
    .navi{
        display: flex;
        background-color: #fff;
    }
    .navi hr{
        border: none;
        height: 1.5px;
        width: 100%;
        background-color: #dddfe1;
        box-shadow: 0 10px 10px rgba(0,0,0,.1); 
    }
    .navi .func{
        width: 20%;
    }
    .navi .search{
        display: flex;
        margin: auto auto;
        background-color: #f1f2f3;
        height: 40px;
        border-radius: 10px;
        border: solid 1px #e6e8e9;
        width: 30%;
    }
    .SearchInput{
        background-color: #f1f2f3;
        box-sizing: border-box;
        border-radius: 10px;
        border: none;
        font-size: 15px;
        text-align: left;
        outline: none;
        resize: none;
        overflow: hidden;
        height: 30px;
        padding-left: 8px;
        margin: 5px 5px;
        width: calc(100% - 50px);
    }
    .searchImg{
        height: 30px;
        width: 30px;
        margin: 5px 0;
        border-radius: 5px;
        border: none;
        background-color: #f1f2f3;
    }
    .searchImgHover{
        height: 30px;
        width: 30px;
        margin: 5px 0;
        border-radius: 5px;
        border: none;
        background-color: #fff;
    }
    .searchImg img{
        margin: 0 auto;
        padding-top: 5px;
    }
    .searchImgHover img{
        margin: 0 auto;
        padding-top: 5px;
    }
    .navi .search:hover{
        background-color: #fff;
        border: 1px solid #c9ccd0;
    }
    .navi .searchfocus{
        display: flex;
        background-color: #fff;
        margin: auto auto;
        height: 40px;
        border-radius: 10px;
        border: solid 1px #e6e8e9;
        width: 30%;
    }
    .navi .searchInput:focus{
        background-color: #e3e5e7;
    }
    .navi .searchInputHover{
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 10px;
        border: none;
        font-size: 15px;
        text-align: left;
        outline: none;
        resize: none;
        overflow: hidden;
        height: 30px;
        padding-left: 8px;
        margin: 5px 5px;
        width: calc(100% - 50px);
    }
    .navi .user{
        display: flex;
        width: 20%;
        margin: auto 0;
    }
    .msg{
        display: inline-block;
        position: relative;
    }
    .navi .user .msg .msgbox{
        display: flex;
        flex-direction: column;
        cursor: pointer;
        width: 50px;
        height: 50px;
        margin-left: 10px;
    }
    .navi .user .history div{
        display: flex;
        flex-direction: column;
        cursor: pointer;
        width: 50px;
        height: 50px;
    }
    .jump{
        margin: 0 auto;
    }
    .login{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #00aeec;
        margin: auto 0;
    }
    .login .loginText{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
        width: 40px;
        height: 40px;
    }
    .loginPrompt{
        position: relative;
        margin-left: 71.2% ;
        width: 300px;
        height: 180px;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #dddfe1;
        border-radius: 10px;
        z-index: 999;
    }
    .msgbox{
        position: relative;
        width: 40px;
        height: 40px;
    }
    .msgPrompt{
        position: relative;
        margin-left: 75%;
        width: 300px;
        height: 100px;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #dddfe1;
        border-radius: 10px;
        z-index: 999;
    }
    .historyPrompt{
        position: relative;
        margin-left: 78%;
        width: 300px;
        height: 100px;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #dddfe1;
        border-radius: 10px;
        z-index: 999;
    }
    .funcIntroduce{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .funcIntroduce li{
        list-style: none;
        width: 45%;
        height: 30px;
    }
    .loginBtn{
        width: 80%;
        height: 40px;
        margin: 0 auto;
        margin-top: -10px;
        background-color: #00aeec;
        border-radius: 10px;
        cursor: pointer;
    }
    .loginBtn a{
        display: flex;
        justify-content: center;
        text-decoration: none;
        color: #fff;
        font-size: 15px;
        padding-top: 10px;
        cursor: pointer;
    }
    .login .loginText a{
        display: block;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: #fff;
        font-size: 15px;
    }
    .login .loginText img{
        display: block;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
    }
    .resignBox{
        display: flex;
        justify-content: center;
        margin: 10px;
    }
    .resignBtn{
        text-decoration: none;
        color: #49caec;
    }
    .msg .msgbox{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .history div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login:hover .jump{
        animation: jumpR 0.5s;
        margin: 0 auto;
    }
    .msg:hover .jump{
        animation: jumpR 0.5s;
        margin: 0 auto;
    }
    .history:hover .jump{
        animation: jumpR 0.5s;
        margin: 0 auto;
    }
    @keyframes jumpR {
        0%{transform: translateY(0px);}
        50%{transform: translateY(-5px);;}
        100%{transform: translateY(0px);}
    }
    .msg .msgbox a{
        text-decoration: none;
        color: #000;
        font-size: 15px;
        margin: 0 auto;
    }
    .history div a{
        text-decoration: none;
        color: #000;
        font-size: 15px;
        margin: 0 auto;
    }
    .fade-enter-active{
        animation: jumpD 0.3s;
    }
    .fade-leave-active{
        animation: jumpU 0.3s;
    }
    .fade-leave, 
    .fade-enter-to {
    opacity: 1;
    } 
    .fade-leave-to,
    .fade-enter {
    opacity: 0;
    }
    @keyframes jumpD {
        0%{
            transform: translateY(-10px);
            opacity: 0;
        }
        50%{
            transform: translateY(-5px);
            opacity: 0.5;
        }
        100%{
            transform: translateY(0px);
            opacity: 1;
        }
    }
    @keyframes jumpU {
        0%{
            transform: translateY(0px);
            opacity: 1;
        }
        50%{
            transform: translateY(-5px);
            opacity: 0.5;
        }
        100%{
            transform: translateY(-10px);
            opacity: 0;
        }
    }
    .loPrompt{
        position: relative;
        margin-left: 74%;
        width: 14%;
        height: auto;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #dddfe1;
        border-radius: 10px;
        z-index: 999;
    }
    .loMain{
        width: 100%;
        height: auto;
        border: none;
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
        background-color: #fff;
    }
    .loImage{
    display: flex;
    justify-content: center;
    margin-top: 15px;
    /* border: solid 1px red; */
    }
    .loImage img{
        border-radius: 50%;
        /* border: solid 1px red; */
        width: 60px;
        height: 60px;
    }
   
    .textName{
        /* border: solid 1px red; */
        margin: 10px;
        text-align: center;
    }
    .loList{
        display: flex;
        /* border: solid 1px red; */
        margin: 0px;
        padding: 0px;
    }
    .loList ul:hover{
        color: #49caec;
        cursor: pointer;
    }
    .loList ul{
        list-style: none;
        border-bottom: solid 1px black;
        /* border: solid 1px red; */
        padding: 10px;
    }
    .loList ul li{
        /* border: solid 1px red; */
        width: 40px;
        text-align: center;
    }
    .personBox{
        display: flex;
        /* border-bottom: solid 1px black; */
        padding: 10px;
        cursor: pointer;
    }
    .personBox:hover{
        background-color: #f5f5f5;
        cursor: pointer;
    }
    .personBox .person1{
        width: 25px;
        height: 25px;
        /* border: solid 1px red; */
         margin-right: 10px;
        
    }
    .personBox .person2{
        width: 15px;
        height: 15px;
        /* border: solid 1px red; */
        padding-left: 60px;
        padding-top: 5px;
    }
    .loMsgPrompt{
        position: relative;
        margin-left: 82.4%;
        width: 5%;
        height: 2%;
        background-color: #fff;
        border: 1px solid #dddfe1;
        border-radius: 10px;
        z-index: 999;
    }
    .loMsgMain{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
    }
    .mainBoxM{
        width: 100%;
    }
    .loMsgMain li:hover{
        color: #49caec;
        cursor: pointer;
    }

    .loMsgMain ul{
        list-style: none;
        /* border-bottom: solid 1px black; */
        /* border: solid 1px red; */
        padding: 0;
        /* margin-right: 10px; */
        
    }
    .loMsgMain ul li{
        /* border: solid 1px red; */
        /* border-bottom: solid 1px rgb(146, 141, 141); */
        width: 100%;
        padding: 5px 0;
        /* margin: 20px; */
        /* margin-top: 20px; */
        text-align: center;
    }
</style>